<script setup>
const { proxy } = getCurrentInstance();
import { GetDeptPI } from "@/api/common/index";
import {
  inspectionSceneDdlAPI,
  auditTypeDdlDdlAPI,
  gradeDdlAPI,
} from "@/api/specialinspection/category";
/**
 * 传入数据
 */
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

/**
 * 表单实例
 */
const ruleFormRef = ref(null);

/**
 *部门
 */
const deptData = ref([]);

/**
检查项目
 */
const checkList = ref([]);

/**
 * 树结构枚举
 */
const defaultProps = {
  children: "children",
  label: "categoryName",
  value: "id",
};
// 表单字段
const ruleForm = reactive({
  type: "",
  status: "",
  remark: "",
});

/**
 * 表单校验
 */
const rules = reactive({
  inspectionScene: [{ required: true, message: "稽查场景", trigger: "change" }],
  auditType: [{ required: true, message: "稽查类别", trigger: "change" }],
});

/**
自查类别选择
 */

const inspectionChange = (v) => {
  if (v) {
    checkList.value = v == 1 ? environment_check.value : security_check.value;
  } else {
    checkList.value = [];
  }
};
const inspectionSceneList = ref([]);
/*获取稽查场景 */
const getInspectionScene = async () => {
  try {
    const { data: res } = await inspectionSceneDdlAPI();
    inspectionSceneList.value = res.map((t) => {
      return {
        label: t.name,
        value: t.code,
        type: t.type,
      };
    });
  } catch (err) {
    console.log(err);
  }
};
getInspectionScene();
const auditType = ref([]);
const type = ref(0);
/**稽查场景 */
const inspectChange = async (v) => {
  const { data: res } = await auditTypeDdlDdlAPI({
    inspectionScene: v,
  });

  type.value = inspectionSceneList.value.filter((t) => t.value == v)[0].type;

  auditType.value = res.map((t) => {
    return {
      label: t.name,
      value: t.code,
    };
  });
};

/**等级 */
const gradeList = ref([]);
const gradeDdl = async () => {
  const { data: res } = await gradeDdlAPI();

  gradeList.value = res.map((t) => {
    return {
      label: t.name,
      value: t.code,
    };
  });
};
gradeDdl();
/**
 * 提交方法
 */
const submit = async () => {
  const valid = await ruleFormRef.value.validate();
  if (!valid) return false;

  return ruleForm;
};

/**
 * 初始化数据
 */
const initData = () => {
  if (props.data?.id) {
    Object.keys(props.data).forEach(
      (itemKey) => (ruleForm[itemKey] = props.data[itemKey])
    );
    inspectionChange(ruleForm.selfCheckCategory);
  }
};

/**
 * 回显数据赋值
 */
initData();
defineExpose({ submit });
</script>

<template>
  <div class="app-container">
    <!-- 新增 表单 -->
    <el-form
      :model="ruleForm"
      label-width="120px"
      :rules="rules"
      status-icon
      inline
      ref="ruleFormRef"
    >
      <el-form-item label="稽查场景" prop="inspectionScene">
        <p-select
          :option="inspectionSceneList"
          :disabled="props.disabled"
          @change="inspectChange"
          v-model="ruleForm.inspectionScene"
          placeholder="请选择 稽查场景"
        />
      </el-form-item>
      <el-form-item label="稽查类别" prop="auditType">
        <p-select
          :option="auditType"
          :disabled="props.disabled"
          v-model="ruleForm.auditType"
          placeholder="请选择稽查类别"
        />
      </el-form-item>

      <el-form-item label="等级" prop="grade" v-if="type == 2">
        <p-select
          :option="gradeList"
          :disabled="props.disabled"
          v-model="ruleForm.grade"
          placeholder="请选择 等级"
        />
      </el-form-item>

      <div class="rk">
        <el-form-item label="备注" prop="remark">
          <el-input
            :rows="4"
            type="textarea"
            clearable
            v-model="ruleForm.remark"
            :disabled="props.disabled"
          />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>